<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>粘性定位</title>
	<style type="text/css">
		* {
			margin: 0;
		}
		/*demo1*/
		.container {
		    background: #eee;
		    width: 600px;
		    height: 2000px;
		    margin: 0 auto;
		}

		.sticky-box {
		    position: -webkit-sticky;
		    position: sticky;
		    height: 60px;
		    margin-bottom: 50px;
		    background: #ff7300;
		    top: 0px;
		    color: #fff;
		}

		div {
		    font-size: 30px;
		    text-align: center;
		    line-height: 60px;
		}
		
		/*demo2*/
		/*.container {
		    background: #eee;
		    width: 600px;
		    height: 2000px;
		    margin: 0 auto;
		}

		nav {
		    position: -webkit-sticky;
		    position: sticky;
		    top:0;

		}

		nav {
		    height: 50px;
		    background: #999;
		    color: #fff;
		    font-size: 30px;
		    line-height: 50px;
		}

		.content {
		    background: #ddd;
		}

		p {
		    line-height: 40px;
		    font-size: 20px;
		}*/
	</style>
</head>
<body>
	<!-- demo1 -->
	<div class="container">
	    <div class="sticky-box">内容1</div>
	    <div class="sticky-box">内容2</div>
	    <div class="sticky-box">内容3</div>
	    <div class="sticky-box">内容4</div>
	</div>
	<!-- demo2 -->
	<!-- <div class="container">
    	<nav>我是导航栏</nav>
	    <div class="content">
	        <p>我是内容栏</p>
	        <p>我是内容栏</p>
	        <p>我是内容栏</p>
	        <p>我是内容栏</p>
	        <p>我是内容栏</p>
	        <p>我是内容栏</p>
	        <p>我是内容栏</p>
	        <p>我是内容栏</p>
	    </div>
	</div> -->
</body>
</html>